import React, { useState, useEffect } from 'react';
import DashboardCard from '../components/DashboardCard.js';
import DataTable from '../components/DataTable.js';
import Chart from '../components/Chart.js';
import { fetchMarketData } from '../services/Api.js';

const Home = () => {
  const [marketData, setMarketData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadData = async () => {
      try {
        const data = await fetchMarketData();
        setMarketData(data);
      } catch (error) {
        console.error('获取市场数据失败:', error);
      } finally {
        setLoading(false);
      }
    };
    
    loadData();
    
    // 模拟实时数据更新
    const interval = setInterval(() => {
      const updatedData = marketData.map(item => ({
        ...item,
        price: (item.price * (1 + (Math.random() * 0.02 - 0.01))).toFixed(2),
        change: (Math.random() * 5 - 2.5).toFixed(2)
      }));
      setMarketData(updatedData);
    }, 5000);
    
    return () => clearInterval(interval);
  }, []);

  const portfolioData = [
    { id: 1, name: '科技股组合', value: '¥1,245,678', change: '+2.3%' },
    { id: 2, name: '消费股组合', value: '¥876,543', change: '+1.2%' },
    { id: 3, name: '新能源组合', value: '¥567,890', change: '+3.5%' },
    { id: 4, name: '医疗健康组合', value: '¥432,109', change: '-0.8%' }
  ];

  return (
    <div className="home-page">
      <div className="dashboard-grid">
        <DashboardCard 
          title="总资产" 
          value="¥3,624,320" 
          change="+1.8%" 
          icon="wallet"
          color="#4e73df"
        />
        <DashboardCard 
          title="今日收益" 
          value="¥45,678" 
          change="+2.3%" 
          icon="trending-up"
          color="#1cc88a"
        />
        <DashboardCard 
          title="持仓市值" 
          value="¥2,987,654" 
          change="+1.5%" 
          icon="pie-chart"
          color="#36b9cc"
        />
        <DashboardCard 
          title="策略收益率" 
          value="18.7%" 
          change="+3.2%" 
          icon="bar-chart"
          color="#f6c23e"
        />
      </div>
      
      <div className="content-row">
        <div className="chart-container">
          <h3>市场指数走势</h3>
          <Chart 
            type="line" 
            data={[320, 332, 301, 334, 390, 430, 410, 420, 435, 450, 470, 490]}
            labels={['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']}
            colors={['#4e73df']}
          />
        </div>
        
        <div className="chart-container">
          <h3>资产分布</h3>
          <Chart 
            type="doughnut" 
            data={[35, 25, 20, 15, 5]}
            labels={['科技股', '消费股', '新能源', '医疗健康', '其他']}
            colors={['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b']}
          />
        </div>
      </div>
      
      <div className="data-section">
        <h3>实时市场数据</h3>
        <DataTable 
          headers={['名称', '代码', '最新价', '涨跌幅', '成交量(万)']}
          data={marketData}
          loading={loading}
        />
      </div>
      
      <div className="content-row">
        <div className="portfolio-section">
          <h3>投资组合</h3>
          <div className="portfolio-grid">
            {portfolioData.map(item => (
              <div key={item.id} className="portfolio-card">
                <h4>{item.name}</h4>
                <div className="portfolio-value">{item.value}</div>
                <div className={`portfolio-change ${item.change.startsWith('+') ? 'positive' : 'negative'}`}>
                  {item.change}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Home;